<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <el-card>
                    <Detail title="总销售额"  count="￥88460">
                        <template slot="charts">
                                <span>周同比 56.67% <svg t="1673506584291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5559" width="16" height="16"><path d="M512 378.24l-418.88 418.88L0 704l512-512 512 512-93.12 93.12z" fill="#1afa29" p-id="5560"></path></svg></span>
                                &nbsp;&nbsp;
                                <span>日同比 19.96% <svg t="1673506622311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6591" width="16" height="16"><path d="M512 610.88L930.88 192 1024 285.12l-512 512-512-512L93.12 192z" fill="#d81e06" p-id="6592"></path></svg></span>
                        </template>
                        <template slot="footer">
                               <span>日销售额 ￥12423</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <Detail title="访问量"  count="11160">
                        <template slot="charts">
                            <LineCharts></LineCharts>
                        </template>
                        <template slot="footer">
                               <span>日访问量 1234</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <Detail title="支付笔数"  count="828460">
                        <template slot="charts">
                               <barCharts></barCharts>
                        </template>
                        <template slot="footer">
                               <span>转化率 65%</span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <Detail title="运营活动效果"  count="78%">
                        <template slot="charts">
                               <progressCharts></progressCharts>
                        </template>
                        <template slot="footer">
                                <span>周同比 56.67% <svg t="1673506584291" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5559" width="16" height="16"><path d="M512 378.24l-418.88 418.88L0 704l512-512 512 512-93.12 93.12z" fill="#1afa29" p-id="5560"></path></svg></span>
                                &nbsp;&nbsp;
                                <span>日同比 19.96% <svg t="1673506622311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6591" width="16" height="16"><path d="M512 610.88L930.88 192 1024 285.12l-512 512-512-512L93.12 192z" fill="#d81e06" p-id="6592"></path></svg></span>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import progressCharts from './progressCharts'
import barCharts from './barCharts'
import LineCharts from './lineCharts'
import Detail from './Detail'
export default {
    name:'Card',
    components:{
        Detail,LineCharts,barCharts,progressCharts
    }
}
</script>

<style>

</style>